<template>
	<view class="page">
		<view class="content padding-30 box-sizing">
			<!-- <up-tabs :scrollable="false" :list="tabs" @click="tabClick"></up-tabs> -->
			<view class="head_tab flex items-center flex-center">
				<view class="" @click="tabClick(0)" style="margin-right: 78rpx;">
					<image src="../../../static/image/yijie.png" mode=""  v-if="current==0"></image>
					<view class="head_tab_tit" v-if="current==1">
						一阶训练
					</view>
				</view>
				<view class="" @click="tabClick(1)">
					<image src="../../../static/image/erjie.png" mode="" v-if="current==1"></image>
					<view class="head_tab_tit" v-if="current==0">
						二阶训练
					</view>
				</view>
			</view>
			<!-- <view class="imageBox">
				<image  src="../../../static/bj.png" mode=""></image>
			</view> -->
			<view class="width-full height-50">

			</view>
			<view class="textBox marginTop-30" v-if="current == 0">
				<view class="title fontSize-28">
					<image class="imageBj" :src="image1" mode="aspectFit"></image>
				</view>
				<view class="text fontSize-44 color-333 text-center marginBottom-10" v-for="(item,index) in big_title1.split('/n')">
					{{item}}
				</view>
				<view class="text fontSize-30 color-666" style="width: 360rpx; margin: 20rpx auto;color: #666;">
					  <span v-html="small_title1.replace(/\/n/g, '\n')"></span>
				</view>
			</view>
			<view class="textBox marginTop-30" v-if="current == 1">
				<view class="title fontSize-28">
					<image class="imageBj" :src="image2" mode="aspectFit"></image>
				</view>
				<view class="text fontSize-44 color-333 text-center marginBottom-10" v-for="(item,index) in big_title2.split('/n')">
					{{item}}
				</view>
				<view class="text fontSize-30 color-666 text-center" style="width: 360rpx; margin: 20rpx auto;color: #666;">
					  <span v-html="small_title2.replace(/\/n/g, '\n')"></span>
				</view>
			</view>
	<!-- 		<view class="textBox marginTop-30" v-if="current == 0">
				<view class="title fontSize-28">
					<image class="imageBj" :src="list.first.pic" mode="aspectFit"></image>
				</view>
				<view class="text fontSize-28 color-696969">
					  <span v-html="list.first.intro.replace(/ /g, '&nbsp;')"></span>
				</view>

			</view>
			<view class="textBox marginTop-30" v-if="current == 1">
				<view class="title fontSize-28">
					<image class="imageBj" :src="list.second.pic" mode="aspectFit"></image>
				</view>
				<view class="text fontSize-28 color-696969">
					 <span v-html="list.second.intro.replace(/ /g, '&nbsp;')"></span>
				</view>
			
			</view> -->

		</view>
		<view class="width-full box-sizing btns padding-30 ">
			<view class="go_train" @click="toPractice">
				开启训练吧！
			</view>
			<view class="train_sure" @click="toList">
				训练记录
			</view>
		
		</view>
		<!-- <view class="width-full box-sizing btns flex items-center space-between padding-30 ">
			<view class="marginTop-20 flex flex-center" style="width: calc(50% - 20rpx);">
				<up-button @click="toPractice" size="normal" type="primary" text="去训练"></up-button>
			</view>
			<view class="marginTop-20 flex flex-center" style="width: calc(50% - 20rpx);">
				<up-button @click="toList" size="normal" type="primary" text="训练记录"></up-button>
			</view>
		</view> -->
		<up-modal :show="editShow" content="你还有未训练完的单词,请先将未训练完的单词完成" showCancelButton @close="cancel" @cancel="cancel"
			@confirm="setTitle" title=" ">
			<view class="slot-content">
				<up-input maxlength="6" v-model="defaultTitle" border="bottom" placeholder="最多6个字"></up-input>
			</view>
		</up-modal>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		nextTick,
		inject
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	const judgepracticeApi = inject('judgepractice');
	const practiceIntroApi = inject('practiceIntro');
	const practiceWordsviewApi = inject('practiceWordsview');
	const PracticeWordsApi=inject('PracticeWords')
	// data
	const tabs = ref([{
			name: '一阶训练'
		},
		{
			name: '二阶训练'
		},
	]);
	const editShow = ref(false);
	const list = ref({});
	const current = ref(0);
	const image1=ref('')
	const image2=ref('')
	const big_title1=ref('')
	const big_title2=ref('')
	const small_title1=ref('')
	const small_title2=ref('')
	// created


	onLoad(() => {
		PracticeWordsApi({

		}).then(res => {
			console.log(res,98)
			let data=res[0]
			image1.value=data.image1
			image2.value=data.image2
			big_title1.value=data.big_title1
			big_title2.value=data.big_title2
			small_title1.value=data.small_title1
			small_title2.value=data.small_title2
		});
	});




	// methods
	const tabClick = (e) => {
		console.log(e, 'oooooooo')
		current.value = e
	}
	const toPractice = () => {
		console.log('zzzzzzzz')
		if (current.value > 0) {
			uni.navigateTo({
				url: '/pages/index/practiceWoeds/wordList'
			})
		} else {
			uni.navigateTo({
				url: '/pages/index/practiceWoeds/practiceWordGuide'
			})
			return
			// 下面暂时不走
			judgepracticeApi().then(res => {
				console.log(res);
				if (res) {
					if (res.status == 0) {
						practiceWordsviewApi({
							page: res["page"],
							big_sort: res["big_sort"],
							small_sort: res["small_sort"],
						}).then(es => {
							console.log(es);
							let data = {}
							data['page'] = res["page"]
							data['subscript'] = res['big_sort'] + '_' + res['small_sort'];
							data['big_sort'] = res['big_sort'];
							data['small_sort'] = res['small_sort'];
							data['wordList'] = es['word_list'];
							uni.navigateTo({
								url: '/pages/index/practiceWord?data=' + JSON.stringify(data)
							})
						})
					} else {
						uni.showToast({
							title: res.ts,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/memoryWordGuide?isJy=1'
							})
						}, 1000)
					}
				} else {

				}

			})
		}

		console.log('eeeeeeee')
	}
	const toList = () => {
		console.log('sssssssss')
		uni.navigateTo({
			url: '/pages/index/practiceWoeds/practiceList?type=' + current.value
		})
	}
	const cancel = () => {
		editShow.value = false
	}
	const setTitle = () => {
		editShow.value = false
	}
</script>

<style lang="scss" scoped>
	.imageBox {
		width: 100%;
		height: 120rpx;

		image {
			border-radius: 8rpx;
			height: 100%;
			width: 100%;
		}
	}
	.imageBj {
		width: 482rpx;
		height: 482rpx;
		display: block;
		margin: 40rpx auto;
	}
	.textBox {
		.title {}

		.text {
			line-height: 50rpx;
		}
	}
	.head_tab{
		image{
			width: 180rpx;
			height: 84rpx;
		}
		.head_tab_tit{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #666666;
			height: 84rpx;
			margin-top: 15rpx;
		}
	}
	.go_train{
		width: 702rpx;
		height: 104rpx;
		background: #40D577;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		text-align: center;
		line-height: 104rpx;
		margin:  0 auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.train_sure{
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #999999;
		margin-top: 32rpx;
		text-align: center;
	}
</style>